<!-- 
- 原生事件：
  - 事件名是特定的（`click`、`mosueenter`等等）	
  - 事件对象`$event`: 是包含事件相关信息的对象（`pageX`、`pageY`、`target`、`keyCode`）
- 自定义事件：
  - 事件名是任意名称
  - 事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！



  	1. 概述：自定义事件常用于：**子 => 父。**
	2. 注意区分好：原生事件、自定义事件。

	自定义事件的流程就是,通过在父中使用子组件传参绑定自定义事件
	自定义事件中是我们的函数,函数中写形参来接受我们从子组件中拿到的参数
	
	绑定后在子组件中使用
	const emit =  defineEmits(['send-toy'])
	声明一个变量,emit是因为官服文档中的标准定义推荐使用emit来获取事件
	然后
	在子组件中去触发该事件
	使用方法为
	emit("事件名字",我们的数据)
	当我们点击,或者调用emit中的某个事件中,会调用该事件中的函数,然后函数接受参数.....
 -->

<template>
  <div class="father">
    <h3>父组件</h3>
		<h4 v-show="toy">子给的玩具：{{ toy }}</h4>
		<!-- 给子组件Child绑定事件 -->
    <Child @send-toy="saveToy"/>
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue'
import { ref } from "vue";
// 数据
let toy = ref('')
// 用于保存传递过来的玩具
function saveToy(value: string) {
	console.log('saveToy', value)
	toy.value = value
}
</script>

<style scoped>
.father {
	background-color: rgb(165, 164, 164);
	padding: 20px;
	border-radius: 10px;
}

.father button {
	margin-right: 5px;
}
</style>